<template>
  <div class="make_day">
    <header id="head" class="fff">
      <div id="bar"></div>
      <ul class="flex-col">
        <li class="head-l">
          <i>XX</i>
        </li>
        <li class="box1 head-c">预约日程</li>
        <li class="head-r flex-col flex-middle">保存</li>
      </ul>
    </header>
    <main>
      <ul class="make_it flex-col font-14">
        <li class="box-center active">
          <p>今天</p>
          <span>1月15日</span>
        </li>
        <li class="box-center">
          <p>明天</p>
          <span>1月15日</span>
        </li>
        <li class="box-center">
          <p>周三</p>
          <span>1月15日</span>
        </li>
        <li class="box-center">
          <p>周四</p>
          <span>1月15日</span>
        </li>
        <li class="box-center">
          <p>周五</p>
          <span>1月15日</span>
        </li>
        <li class="box-center">
          <p>周六</p>
          <span>1月15日</span>
        </li>
      </ul>
      <ul class="make_time flex-parent cfff font-14">
        <li>
          <div class="shape-z position-r">
            <div class="position-a full box-center">
              <p>08:30</p>
              <span>可预约</span>
            </div>
          </div>
        </li>
        <li>
          <div class="shape-z position-r">
            <div class="position-a full box-center">
              <p>08:30</p>
              <span>可预约</span>
            </div>
          </div>
        </li>
        <li>
          <div class="shape-z position-r">
            <div class="position-a full box-center">
              <p>08:30</p>
              <span>可预约</span>
            </div>
          </div>
        </li>
        <li>
          <div class="shape-z position-r">
            <div class="position-a full box-center">
              <p>08:30</p>
              <span>可预约</span>
            </div>
          </div>
        </li>
        <li>
          <div class="shape-z position-r">
            <div class="position-a full box-center">
              <p>08:30</p>
              <span>可预约</span>
            </div>
          </div>
        </li>
        <li>
          <div class="shape-z position-r">
            <div class="position-a full box-center">
              <p>08:30</p>
              <span>可预约</span>
            </div>
          </div>
        </li>
        <li>
          <div class="shape-z position-r">
            <div class="position-a full box-center">
              <p>08:30</p>
              <span>可预约</span>
            </div>
          </div>
        </li>
        <li>
          <div class="shape-z position-r">
            <div class="position-a full box-center">
              <p>08:30</p>
              <span>可预约</span>
            </div>
          </div>
        </li>
      </ul>
    </main>
  </div>
</template>

<script>
  export default {
    name: ""
  }
</script>

<style scoped lang="scss">
  @import '../../css/rem.scss';
  .make_day {
    .shape-z{
      width: 100%;
      padding-top: 100%;
    }
    .full{
      top: 0;
      left: 0;
    }
    .make_it{
      height: p2r(60px);
      overflow-x: auto;
      li{
        position: relative;
        background: #eef7fe;
        flex: 0 0 25%;
        &.active{
          color: #0089fe;
          &::after{
            content:'';
            width: 60%;
            height: 100%;
            position: absolute;
            bottom: p2r(4px);
            left: 20%;
            border-bottom:p2r(2px) solid #0089fe;
          }
        }
      }
    }
    .make_time{
      padding: p2r(8px);
      li{
        padding: p2r(10px) p2r(8px);
        box-sizing: border-box;
        flex: 0 0 25%;
        div{
          border-radius: p2r(5px);
          div{
            background: #85b5dd;
            span{
              color: #1e6ff1;
            }
          }
        }
      }
    }
  }
</style>
